import React from 'react';
import styled from 'styled-components';
import { Button, Tag } from 'antd';
import { formatDate } from '../../utils/dateUtil';
import { Coupon } from '../../api/types';

// 卡片容器
const CardContainer = styled.div<{ isUsed?: boolean; isExpired?: boolean }>`
  height: 120px;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: ${props => 
    props.isExpired ? '#f5f5f5' : 
    props.isUsed ? '#f0f0f0' : '#fff1f0'
  };
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 80px;
    border-right: 1px dashed #fff;
  }
  
  &::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 80px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #f5f5f5;
  }
  
  &::before {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 80px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #f5f5f5;
  }
  
  opacity: ${props => (props.isUsed || props.isExpired) ? 0.7 : 1};
`;

// 金额区域
const ValueArea = styled.div`
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 18px;
  color: #ff4d4f;
  font-weight: bold;
  background-color: rgba(255, 77, 79, 0.1);
  
  .value {
    font-size: 36px;
    margin-right: 4px;
  }
  
  .discount-text {
    font-size: 14px;
    margin-top: 4px;
  }
`;

// 信息区域
const InfoArea = styled.div`
  flex: 1;
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`;

// 卡片顶部
const CardTop = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
`;

// 卡片标题
const CardTitle = styled.div`
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
`;

// 卡片描述
const CardDescription = styled.div`
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
`;

// 限制条件
const Restrictions = styled.div`
  font-size: 12px;
  color: #999;
`;

// 卡片底部
const CardBottom = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

// 有效期
const Validity = styled.div`
  font-size: 12px;
  color: #999;
`;

// 状态标签
const StatusTag = styled.div`
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
`;

// 使用按钮区域
const ActionArea = styled.div`
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
`;

interface CouponCardProps {
  coupon: Coupon;
  onUse?: (couponId: string) => void;
}

const CouponCard: React.FC<CouponCardProps> = ({ coupon, onUse }) => {
  // 判断是否已过期
  const isExpired = new Date(coupon.endDate) < new Date();
  
  const handleUse = () => {
    if (onUse && !coupon.used && !isExpired) {
      onUse(coupon.id);
    }
  };
  
  return (
    <CardContainer isUsed={coupon.used} isExpired={isExpired}>
      <ValueArea>
        {coupon.type === 'cash' ? (
          <>
            <div>
              <span className="value">¥{coupon.value}</span>
            </div>
            <div className="discount-text">现金券</div>
          </>
        ) : (
          <>
            <div>
              <span className="value">{coupon.value}</span>折
            </div>
            <div className="discount-text">折扣券</div>
          </>
        )}
      </ValueArea>
      
      <InfoArea>
        <CardTop>
          <div>
            <CardTitle>{coupon.name}</CardTitle>
            <CardDescription>
              {coupon.minAmount ? `满${coupon.minAmount}元可用` : '无门槛优惠券'}
            </CardDescription>
            <Restrictions>
              {coupon.restrictions?.map((restriction, index) => (
                <div key={index}>{restriction}</div>
              ))}
            </Restrictions>
          </div>
          
          <StatusTag>
            {coupon.used ? (
              <Tag color="default">已使用</Tag>
            ) : isExpired ? (
              <Tag color="default">已过期</Tag>
            ) : (
              <Tag color="red">未使用</Tag>
            )}
          </StatusTag>
        </CardTop>
        
        <CardBottom>
          <Validity>
            有效期至: {formatDate(coupon.endDate)}
          </Validity>
        </CardBottom>
      </InfoArea>
      
      <ActionArea>
        <Button
          type="primary"
          size="small"
          disabled={coupon.used || isExpired}
          onClick={handleUse}
        >
          立即使用
        </Button>
      </ActionArea>
    </CardContainer>
  );
};

export default CouponCard; 